<template>
    <div class="tabBar" v-if="!appNestState">
        <router-link v-for="(item,index) in menuArr"  class="tabBar-item"  :class="{ 'active' : curr==index}" :to="item.url">
            <div  @click="tabFun(index)">
                <img  class="tabBar-item-icon" :src=" curr==index ? item.iconFocus : item.icon">
                <p class="tabBar-item-tit">{{item.name}}</p>
            </div>
        </router-link>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: "TabBar",
        data() {
            return {
                index:0,
                menuArr:[
                    {name:'首页', url:'/', icon:require('../assets/tabBar-home.png'), iconFocus:require('../assets/tabBar-home-focus.png')},
                    {name:'攻略',url:'/strategy',icon:require('../assets/tabBar-raiders.png'),iconFocus:require('../assets/tabBar-raiders-focus.png')},
                    {name:'目的地',url:'/cityChoose',icon:require('../assets/tabBar-destination.png'),iconFocus:require('../assets/tabBar-destination-focus.png')},
                    {name:'定制',url:'/formulate-submit',icon:require('../assets/tabBar-custom.png'),iconFocus:require('../assets/tabBar-custom-focus.png')},
                    {name:'我的',url:'/my',icon:require('../assets/tabBar-my.png'),iconFocus:require('../assets/tabBar-my-focus.png')}
                ]
            }
        },
        computed: mapState({
            appNestState: state => state.appNestState,
        }),
        methods:{
            tabFun(val){
                this.index=val;
            }
        },
        props:['curr']
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .tabBar{
        position: fixed;
        z-index: 9999;
        left: 0;
        right: 0;
        bottom: 0;
        border-top:$color2 solid 1px;
        background: $color0;
        display: flex;
        align-items: center;
        height: rpx(90);
        &-item{
            flex: 1;
            text-align: center;
            color:#696969;
            &-icon{
                width: rpx(48);
                height: rpx(48);
                vertical-align: top;
            }
            &-tit{
                padding-top: rpx(6);
                font-size: rpx(24);
            }
            &.active{
                color:$color3;
            }
        }

    }


</style>